import React, { useMemo, useState } from 'react';
import CommonTable from '@/components/Table';
import AddForm from './AddForm';
import { Button, Switch, Tag, message } from 'antd';
import { PapersItem, addPaper, delPaper, getPapers, updatePaperStatus } from '@/api/exam/paper';
import moment from 'moment';
import DetailDrawer from './DetailDrawer';
import { Questions } from '@/api/question';
import Search from './Search';

const columns = [
  {
    title: '试卷名称',
    dataIndex: 'paperName',
    key: 'paperName',
    width: '120px'
  },
  {
    title: '分类',
    dataIndex: 'categories',
    width: '100px',
    key: 'categories',
    render: (categories: any) => <Tag>{categories}</Tag>
  },
  {
    title: '试卷内容',
    width: '100px',
    dataIndex: 'paperContent',
    key: 'paperContent'
  },
  {
    title: '分数规则',
    width: '120px',
    dataIndex: 'rules',
    key: 'rules',
    render: (text: string) => (
      <>
        {Object.entries(text ? JSON.parse(text) : []).map((it: any[]) => (
          <div key={it[0]}>
            {it[0]}: {it[1] + '分'}
          </div>
        ))}
      </>
    )
  },
  {
    title: '是否对外开放',
    width: '120px',
    dataIndex: 'isOpen',
    key: 'isOpen'
  }
];

const Combination = () => {
  const [visible, setVisible] = useState(false);
  const [form, setAddForm] = useState(null);
  const [questions, setQuestions] = useState<Questions[]>([]);
  const [requestCount, setRequestCount] = useState<boolean>();
  const toDetail = (content: string) => {
    setQuestions(content ? JSON.parse(content) : []);
    setVisible(true);
  };
  const handleChecked = (checked: boolean, _id: number) => {
    updatePaperStatus({
      _id,
      isOpen: checked ? '是' : '否'
    }).then(() => {
      console.log(requestCount);
      setRequestCount(checked);
      if (checked) {
        message.success('更改状态成功！！但该试卷不会出现在考试中！');
      }
    });
  };
  const tableCloums = useMemo(() => {
    const index = columns.findIndex((it) => it.dataIndex === 'paperContent');
    const index2 = columns.findIndex((it) => it.dataIndex === 'isOpen');
    columns[index].render = (text: any) => (
      <Button type="link" onClick={() => toDetail(text)}>
        查看
      </Button>
    );
    columns[index2].render = (isOpen: string, v: PapersItem) => (
      <Switch checked={isOpen === '是' ? true : false} onChange={(checked) => handleChecked(checked, v._id)} />
    );
    return [...columns];
  }, []);

  const handleChange = () => {};

  return (
    <>
      <DetailDrawer questions={questions} visible={visible} setVisible={setVisible} />
      <CommonTable
        title="组卷"
        requestCount={requestCount}
        columns={tableCloums}
        onChange={handleChange}
        getDataApi={getPapers}
        addDataApi={addPaper}
        deleteApi={delPaper}
        SerchBar={<Search />}
        setAddForm={setAddForm}
        AddForm={<AddForm form={form} setVisible={setVisible} setQuestions={setQuestions} />}
        EditForm={<></>}
      />
    </>
  );
};

export default Combination;
